<template>
  <!--审批列表-->
  <div style="display: flex;flex-direction: column;width: 100%;">
    <div style="color: red;font-size: 13px;">“并行全部审核”表示该审批顺序内的人员全部审核通过后，即可进入下一审批节点。</div>
    <block v-for="(item, index) in list" :key="index">
      <div style="display: flex;">
        <div class="com-li-l" style="width:110px;display: flex;align-items: center;">
          <div class="com-li-l-l" style="width: calc(100% - 20px);font-size: 12px;font-weight: 600;line-height: 25px;">
            审批顺序{{item.number}}<br /><span style="font-weight: 400;font-size: 20rpx;"
              v-if="item.isParallel === '1'">(并行全部审核)</span></div>
          <div class="com-li-l-r" :style="{'justify-content': index===0?'flex-end':''}"
            style="position: relative;display: flex;flex-direction: column;align-items: center;width: 30px;height:100%;">
            <div class="line" :style="{display: index===0?'none':''}"
              style="height: calc(50% - 5px);width: 1px;background: #fff;border-left: 1px dashed #979797;"></div>
            <div class="statu" :style="{background:item.status === '0'?'#C4C4C4':'#0081ff'}"
              style="width: 10px;height: 10px;border-radius: 5px;text-align: center;"></div>
            <div class="line" :style="{display: index===(list.length - 1)?'none':''}"
              style="height: calc(50% - 5px);width: 1px;background: #fff;border-left: 1px dashed #979797;"></div>
          </div>
        </div>
        <div style="display: flex;flex-direction: column;width:calc(100% - 110px)">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="line-height: 25px;margin-top: 10px;">审批人 {{ item.departName }} {{ item.realname }} {{(item.userStatus==='2' && item.delFlag!='1' )?'(已冻结)': (item.userStatus!='2' && item.delFlag==='1')?'(已删除)':(item.userStatus==='2' && item.delFlag==='1'?'(已冻结/已删除)':'' )}} 意见:</div>
            <div v-if="(!!item.updateTime) && (item.status == '2' || item.status == '3')" style="line-height: 25px;margin-top: 10px;margin-right: 80px;color:green">审批时间 {{item.updateTime}}</div>
          </div>
          <div style="display: flex;align-items: center;width: 100%;">
            <div
              style="border: 0.5px solid gray; width: calc(100% - 85px); padding: 0 5px;display: flex;align-items: center;"
              :style="{background:((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?'#fff':'#f5f5f5'}">
              <!-- <a-input
                :disabled="((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true"
                v-if="!(((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true)"
                v-model="item.feedback" placeholder="" :maxLength="200"
                style="width: calc(100% - 50px);border: none;background: none;"></a-input> -->
                
              <textarea 
                :disabled="((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true"
                v-if="!(((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true)" 
                v-model="item.feedback" cols="100" rows="2" style="width: calc(100% - 60px);border: 0.5px solid #eee;background: none;padding-right: 30px;line-height: 25px;" maxlength="200"
                placeholder="请输入意见"></textarea>
				
            <!--="((item.approver === approver)&&(item.status != '1')) && pageType ==='approver'?false:true"-->
              <div
                v-else
                style="width: 100%;border: none;background: none;min-height: 40px;line-height: 25px;">{{item.feedback}}</div>
              <div v-if="(item.feedback && (item.feedback.length > 0))&&(!((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true)" style="width: 60px;color: #999;text-align: right;">
                {{ item.feedback.length>0?item.feedback.length:0 }}/200</div>
              <div v-else-if="(!((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true)&&(!item.feedback)" style="width: 60px;color: #999;text-align: right;">0/200</div>
            </div>
            <a-list placeholder="请选择状态" :data-source="list"
              style="font-size: 16px; width: 80px; margin-left: 5px; display: inline-block">
              <a-list-item v-if="item.status == '1'" style="color: blue">审核中</a-list-item>
              <a-list-item v-if="item.status == '2'" style="color: green">已同意</a-list-item>
              <a-list-item v-if="item.status == '3'" style="color: red">已驳回</a-list-item>
              <a-list-item v-if="item.status == '4'" style="color: gray">已撤销</a-list-item>
            </a-list>
          </div>
          <div style="margin: 0px 0;width: 89%;">
            <j-upload v-model="item.ideaAttachment"
              :disabled="((item.approver === approver)&&(item.status === '1')&&(item.isAttachment === '1')) && pageType ==='approver'?false:true"
              :buttonVisible="!(((item.approver === approver)&&(item.status === '1')&&(item.isAttachment === '1')) && pageType ==='approver'?false:true )"></j-upload>
          </div>
        </div>
      </div>
    </block>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      obj: {
        type: Object,
        default: () => ({})
      },
      list: {
        type: Array,
        default: () => ([])
      },
      title: {
        type: String,
        default: ''
      },
      pageType: {
        type: String,
        default: ''
      },
      is_disable: {
        type: Boolean,
        default: false
      },
      approver:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        
      };
    },
    created() {
      
    },
    methods: {
      tolink(type, item, index) {
        console.log(223, type, item, index)
        this.$emit('tolink', type, item, index)
      },
    }
  }
</script>

<style scoped>

</style>